import './index.scss'
import "../style/header.scss";
import React, { useState,useEffect } from "react";
// import Top from "./pages/Top";


import Terran from '../../components/Earth/Terran'
import Lifetime from '../../components/Earth/Lifetime'

import Weather from '../../components/Weather'

import Clock from '../../components/Clock';
// 导入右上第一个表格
import Luck from '../../components/Earth/Luck'

import { Link } from "react-router-dom";
import { Breadcrumb, Layout, Menu } from "antd";


import Themebounced from '../../components/Themebounced'
import Index from '../../components/Earth/Terran';

const { Header, Content, Footer } = Layout;

function App() {
    const [zoomMode, setzoomMode] = useState('');
    const [zoomMode1, setzoomMode1] = useState('');
    // console.log(`settings`, settings);
    useEffect(() => {
        const settings = JSON.parse(localStorage.getItem("settings")) || {};
        // console.log(`settings`, settings);
        if (settings.zoomMode == "stretch") {
            setzoomMode("right_zone_3d");
            setzoomMode1('left_zone_3d')
            // console.log(`123`);
        }
        if (settings.zoomMode == "cover") {
            setzoomMode("right_zone_3d_cover");
            setzoomMode1('left_zone_3d_cover')
            // console.log(`123`);
        }
        if (settings.zoomMode == "contain") {
            setzoomMode("right_zone_3d_contain");
            setzoomMode1('left_zone_3d_contain')
            // console.log(`123`);
        }

    }, []);
    return (
        <Layout className="layout">
            <Header className="logoOne">
                <div className="logo">
                    <a href="http://e-art.top" className="logo" title="关中刀客在青岛">
                        <img
                            src="http://e-art.top/projects/bigScreenCharts/static/img/logo_v0.1_w.png"
                            alt=""
                        />
                    </a>
                </div>
                <p>大屏图表适配解决方案</p>
                <div className="weather">
                    <div className='weatershang'>
                        <Weather province="河北" city="保定" />
                        <Clock />
                    </div>
                    <div className="router">
                        <Link to='/map'>进入地图</Link>
                        <Link to='/home'>返回首页</Link>
                        <Link to='/studyplan'>学习计划进度</Link>
                    </div>
                </div>
            </Header>
            <Themebounced />
            <Content>
                <div className="left_col">
                    <div className={zoomMode1}>
                        {/* 左图 */}
                        <Index></Index>
                    </div>
                    <div className='right_col'>
                        <div className={zoomMode}>
                            <Luck></Luck>
                            
                        </div>
                        <div className={zoomMode}>
                            {/* 右下 */}
                            <Lifetime></Lifetime>
                        </div>
                    </div>
                </div>
            </Content>
        </Layout >
    );
}
export default App;
